<!--
 * @description 按钮组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<button
		class="pure-button"
		:class="_classes"
		:style="_styles"
		:form-type="formType"
		:open-type="_openType"
		:hover-class="hoverClass"
		:hover-start-time="hoverStartTime"
		:hover-stay-time="hoverStayTime"
		:app-parameter="appParameter"
		:hover-stop-propagation="hoverStopPropagation"
		:lang="lang"
		:session-from="sessionFrom"
		:send-message-title="sendMessageTitle"
		:send-message-path="sendMessagePath"
		:send-message-img="sendMessageImg"
		:show-message-card="showMessageCard"
		:group-id="groupId"
		:guild-id="guildId"
		:public-id="publicId"
		:data-im-id="dataImId"
		:data-im-type="dataImType"
		:data-goods-id="dataGoodsId"
		:data-order-id="dataOrderId"
		:data-biz-line="dataBizLine"
		:scope="scope"
		@getphonenumber="_handleGetPhoneNumber"
		@getPhoneNumber="_handleGetPhoneNumber"
		@getuserinfo="_handleGetUserInfo"
		@getUserInfo="_handleGetUserInfo"
		@error="_handleError"
		@opensetting="_handleOpenSetting"
		@openSetting="_handleOpenSetting"
		@launchapp="_handleLaunchApp"
		@launchApp="_handleLaunchApp"
		@contact="_handleContact"
		@chooseavatar="_handleChooseAvatar"
		@chooseAvatar="_handleChooseAvatar"
		@agreeprivacyauthorization="_handleAgreePrivacyAuthorization"
		@agreePrivacyAuthorization="_handleAgreePrivacyAuthorization"
		@addgroupapp="_handleAddGroupApp"
		@addGroupApp="_handleAddGroupApp"
		@chooseaddress="_handleChooseAddress"
		@chooseAddress="_handleChooseAddress"
		@chooseinvoicetitle="_handleChooseInvoiceTitle"
		@chooseInvoiceTitle="_handleChooseInvoiceTitle"
		@subscribe="_handleSubscribe"
		@login="_handleLogin"
		@im="_handleIM"
		@tap="_handleClick"
	>
		<!-- Loading 状态 -->
		<view
			class="pure-button__content pure-button__content--loading"
			v-if="loading"
		>
			<slot name="loading">
				<!-- loading 图标 -->
				<view
					class="pure-button__icon pure-button__icon--loading"
					v-if="loadingIconName || $slots.loadingIcon"
				>
					<slot name="loadingIcon">
						<pure-icon
							:name="loadingIconName"
							v-bind="loadingIconOpts"
						></pure-icon>
					</slot>
				</view>

				<!-- loading 文本 -->
				<view
					class="pure-button__text pure-button__text--loading"
					v-if="loadingText || $slots.loadingText"
				>
					<slot name="loadingText">
						<text class="pure-button__text__text">{{ loadingText }}</text>
					</slot>
				</view>
			</slot>
		</view>

		<!-- 默认状态 -->
		<view
			class="pure-button__content pure-button__content--default"
			:class="{ 'pure-button__content--hidden': loading }"
			v-else
		>
			<!-- 前置图标 -->
			<view
				class="pure-button__icon pure-button__icon--front"
				v-if="iconName || $slots.icon"
			>
				<slot name="icon">
					<pure-icon
						:name="iconName"
						v-bind="iconOpts"
					></pure-icon>
				</slot>
			</view>

			<!-- 按钮文本 -->
			<view
				class="pure-button__text pure-button__text--default"
				v-if="text || $slots.default"
			>
				<slot>
					<text class="pure-button__text__text">{{ text }}</text>
				</slot>
			</view>

			<!-- 后置图标 -->
			<view
				class="pure-button__icon pure-button__icon--after"
				v-if="afterIconName || $slots.afterIcon"
			>
				<slot name="afterIcon">
					<pure-icon
						:name="afterIconName"
						v-bind="afterIconOpts"
					></pure-icon>
				</slot>
			</view>
		</view>
	</button>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed } from "vue";
	import props from "./props";
	import { getThemeValue } from "../../utils";

	// -------------------------------------------------------------------------------- Refs
	// 防抖定时器
	const _timer = ref(null);

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits([
		"onClick",
		"onDebounce",
		"onGetPhoneNumber",
		"onGetUserInfo",
		"onError",
		"onOpenSetting",
		"onLaunchApp",
		"onContact",
		"onChooseAvatar",
		"onAgreePrivacyAuthorization",
		"onAddGroupApp",
		"onChooseAddress",
		"onChooseInvoiceTitle",
		"onSubscribe",
		"onLogin",
		"onIM"
	]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 主题按钮
		if (_props?.theme) array.push(`pure-button--theme pure-button--theme--${_props.theme}`);

		// 边框按钮
		if (_props?.border) array.push("pure-button--border");

		// 是否禁用
		if (_props?.disabled) array.push("pure-button--disabled");

		// 幽灵按钮
		if (_props?.ghost) array.push("pure-button--ghost");

		// 镂空按钮
		if (_props?.plain) array.push("pure-button--plain");

		// 按钮形状
		if (_props?.shape) array.push(`pure-button--shape--${_props.shape}`);

		// 块级按钮
		if (_props?.block) array.push("pure-button--block");

		// 链接按钮
		if (_props?.link) array.push("pure-button--link");

		// 是否显示下划线
		if (_props?.underline) array.push("pure-button--underline");

		return array;
	});

	// **************************************************************************************************************
	// * Styles
	// **************************************************************************************************************
	const _styles = computed(() => {
		const array = [];

		// 主题
		if (_props.theme) array.push(`--pure-button-theme: ${getThemeValue(_props.theme)}`);

		return array;
	});

	// 微信小程序和支付宝小程序的获取手机号对应的 open-type 不一致，处理成一致的
	const _openType = computed(() => {
		let openType = _props.openType;

		// #ifdef MP-ALIPAY
		if (openType === "getPhoneNumber" || openType === "getUserInfo") {
			// 得处理成 “getAuthorize”
			return "getAuthorize";
		}
		// #endif

		return openType;
	});

	// 点击事件
	function _handleClick() {
		// 开启了防抖
		if (_props.debounce) {
			// 判断是否还在防抖中
			// 还在防抖中
			if (_timer.value) {
				// 判断是否设置了防抖提示语
				// 设置了防抖提示语
				if (_props.tips) {
					uni.showToast({
						title: _props.tips,
						icon: "none",
						mask: true,
						duration: 1000
					});
					return;
				}

				// 未设置防抖提示语
				// 触发防抖事件
				_emits("onDebounce");
			}

			// 未在防抖中
			else {
				// 触发点击事件
				_emits("onClick");

				// 设置防抖定时器
				_timer.value = setTimeout(() => {
					// 清除定时器
					clearTimeout(_timer.value);
					_timer.value = null;
				}, _props.time);
			}
		}

		// 未开启防抖
		else {
			// 触发点击事件
			_emits("onClick");
		}
	}

	// 获取用户手机号
	function _handleGetPhoneNumber(e) {
		_emits("onGetPhoneNumber", e);
	}

	// 获取用户信息
	function _handleGetUserInfo(e) {
		_emits("onGetUserInfo", e);
	}

	// 当使用开放能力时，发生错误
	function _handleError(e) {
		_emits("onError", e);
	}

	// 打开设置
	function _handleOpenSetting() {
		_emits("onOpenSetting");
	}

	// 从小程序打开 App 成功的回调
	function _handleLaunchApp(e) {
		_emits("onLaunchApp", e);
	}

	// 客服消息回调
	function _handleContact(e) {
		_emits("onContact", e);
	}

	// 获取用户头像回调
	function _handleChooseAvatar(e) {
		_emits("onChooseAvatar", e);
	}

	// 用户同意隐私协议事件回调
	function _handleAgreePrivacyAuthorization(e) {
		_emits("onAgreePrivacyAuthorization", e);
	}

	// 添加群应用的回调
	function _handleAddGroupApp(e) {
		_emits("onAddGroupApp", e);
	}

	// 调起用户编辑并选择收货地址的回调
	function _handleChooseAddress(e) {
		_emits("onChooseAddress", e);
	}

	// 用户选择发票抬头的回调
	function _handleChooseInvoiceTitle(e) {
		_emits("onChooseInvoiceTitle", e);
	}

	// 订阅消息授权回调
	function _handleSubscribe(e) {
		_emits("onSubscribe", e);
	}

	// 登录回调
	function _handleLogin(e) {
		_emits("onLogin", e);
	}

	// 监听跳转IM的成功回调
	function _handleIM(e) {
		_emits("onIM", e);
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
